<template>
  <div>
    <div ref="main" id="myPie"></div>
  </div>
</template>

<script>
export default {
  name: "echarts图表",
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 初始化DOM
      let myChart = this.$echarts.init(this.$refs.main);

      // 配件数量
      let numberArr = [];

      // 配件金额
      let priceArr = [];

      // 配件名称
      let nameArr = [];

      for (let i = 0; i < 10; i++) {
        numberArr.push(Math.floor(Math.random() * (100 - 10) + 10));
        priceArr.push(Math.floor(Math.random() * (3000 - 2000) + 2000));
        nameArr.push('配件' + String(i + 1))
      }

      let series = [
        {
          type: 'bar',  // 柱状图
          name: '配件数量',
          barWidth: '35px', // 柱状图粗细
          itemStyle: {
            normal: {
              // 随机颜色(不推荐)
              /*color: function (d) {
                return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
              },*/

              // 定制几种颜色（一般用于排名前x位，可以写固定颜色）
              color: function (params) {
                let colorList = [
                  '#5470C6',
                  '#73C0DE',
                  '#EE6666',
                  '#FAC858',
                  '#9FE080',
                  '#EB7383',
                  '#F439B1',
                  '#39A6F4',
                  '#52DC2C',
                  '#F7E058'
                ];
                let index;
                //给大于颜色数量的柱体添加循环颜色的判断
                if (params.dataIndex >= colorList.length) {
                  index = params.dataIndex - colorList.length;
                  return colorList[index];
                }
                return colorList[params.dataIndex];
              }

            }
          },
          data: numberArr
        },
        {         // 折线图
          type: 'line',
          name: '配件金额(元)',
          symbol: 'emptyCircle',
          symbolSize: 10,
          yAxisIndex: 1,
          data: priceArr,
          smooth: true, // 圆滑
          showSymbol: false, // 隐藏折点
          itemStyle: {
            normal: {
              lineStyle: { // 线条颜色和粗细
                color: '#FF8000',
                width: 5
              }
            }
          }
        }
      ];

      let option = {
        title: {
          text: '维修配件图表',
          left: 'center',
          textStyle: { // 标题样式
            color: '#0000ee',
            fontStyle: 'normal', // 字体
          },
          subtext: '维修配件数排名', // 副标题
          subtextStyle: { // 副标题样式

          }
        },
        xAxis: {
          type: 'category',
          data: nameArr
        },
        yAxis: {
          position: 'left',
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: { // 图例
          right: 20,
          bottom: 20,
          data: ['配件数量', '配件金额(元)'],
          x: 'center', // 水平居中
          y: 'bottom', // 图表底部
        },
        yAxis: [
          {
            type: 'value',
            name: '配件数量',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '配件金额(元)',
            min: 0,
            max: 3000,
            interval: 500,
            axisLabel: {
              formatter: '{value}'
            }
          }],

        series: series
      };

      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
#myPie {
  width: 80%;
  height: 400px;
  margin: 0 auto;
}
</style>
